<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG + CSS 动态霓虹灯文字 </title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding:  0;
      background: #2c3e50;
    }

    .text {
      font-size: 64px;
      font-weight: bold;
      /* 全大写 */
      text-transform: uppercase;
      fill: none;
      stroke-width: 2px;
      stroke-dasharray: 90 310;
      animation: stroke 6s infinite linear;
    }

    .text-1 {
      stroke: #3498db;
      text-shadow: 0 0 5px #3498db;
      animation-delay: -1.5s;
    }

    .text-2 {
      stroke: #f39c12;
      text-shadow: 0 0 5px #f39c12;
      animation-delay: -3s;
    }

    .text-3 {
      stroke: #e74c3c;
      text-shadow: 0 0 5px #e74c3c;
      animation-delay: -4.5s;
    }

    .text-4 {
      stroke: #9b59b6;
      text-shadow: 0 0 5px #9b59b6;
      animation-delay: -6s;
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: -400;
      }
    }
  </style>
</head>

<body>
  <svg width="100%" height="100px">
    <text text-anchor="middle" x="50%" y="75%" class="text text-1">
      Holle 你好!
    </text>
    <text text-anchor="middle" x="50%" y="75%" class="text text-2">
      Holle 你好!
    </text>
    <text text-anchor="middle" x="50%" y="75%" class="text text-3">
      Holle 你好!
    </text>
    <text text-anchor="middle" x="50%" y="75%" class="text text-4">
      Holle 你好!
    </text>
  </svg>

</body>

</html>